<template>
  <div class="b-customized-widget-item cursor-pointer inline-flex flex-col justify-start flex-shrink-0"
       :style="itemStyle"
       v-bind="$attrs"
       v-on="$listeners">
    <img :src="icon"
         v-if="icon"
         fit="fill"
         class="b-customized-widget-item--img">
    <span>{{title}}</span>

    <ZTooltip :line="2"
              placement="bottom-start"
              v-if="description"
              :content="description">
      <span>{{ description }}</span>
    </ZTooltip>
  </div>
</template>

<script>
import ZTooltip from '@/components/storybook/z-tooltip'
import ZIcon from '@/components/storybook/z-icon'
export default {
  name: 'BCustomizedWidgetItem',
  components: {
    ZTooltip,
    ZIcon
  },
  props: {
    icon: {
      type: String
    },
    title: {
      type: String,
      require: true
    },
    description: String,
    itemStyle: true
  }
}
</script>

<style lang="scss" scoped>
.b-customized-widget-item {
  width: 188px;
  height: 128px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px #f0f0f0;
  border-radius: 4px;
  border: 1px solid #fcfcfc;
  padding: 10px;
  transition: all 200ms;
  &:hover {
    box-shadow: #c2c7d0 0px 2px 12px -4px;
  }
  &--img {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }
  span {
    color: #404040;
    font-size: 12px;
    line-height: 18px;
  }
}
</style>
